<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约咨询 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="appointment.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item">网站首页</a>
                <a href="consultation.html" class="nav-item">心理咨询</a>
                <a href="therapist.html" class="nav-item">心理咨询师</a>
                <a href="appointment.html" class="nav-item active">预约咨询</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <a href="#" class="nav-item contact-btn">咨询电话</a>
                <a href="#" class="nav-item login-btn">登录</a>
            </nav>
        </header>

        <main class="appointment-main">
            <div class="page-header">
                <h1>预约咨询</h1>
                <p>填写以下信息，我们将尽快与您联系</p>
            </div>

            <div class="appointment-form">
                <div class="form-container">
                    <form @submit.prevent="submitForm">
                        <div class="form-group">
                            <label>咨询方式</label>
                            <div class="radio-group">
                                <label>
                                    <input type="radio" v-model="form.type" value="online">
                                    在线咨询
                                </label>
                                <label>
                                    <input type="radio" v-model="form.type" value="offline">
                                    面对面咨询
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>选择咨询师</label>
                            <select v-model="form.therapist" required>
                                <option value="">请选择咨询师</option>
                                <option v-for="therapist in therapists" :key="therapist.id" :value="therapist.id">
                                    {{ therapist.name }} - {{ therapist.title }}
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>期望咨询时间</label>
                            <input type="date" v-model="form.date" required min="{{ minDate }}">
                            <select v-model="form.time" required>
                                <option value="">请选择时间段</option>
                                <option v-for="time in availableTimes" :key="time.value" :value="time.value">
                                    {{ time.label }}
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" v-model="form.name" required placeholder="请输入您的姓名">
                        </div>

                        <div class="form-group">
                            <label>联系电话</label>
                            <input type="tel" v-model="form.phone" required placeholder="请输入您的联系电话">
                        </div>

                        <div class="form-group">
                            <label>咨询问题描述</label>
                            <textarea v-model="form.description" rows="4" placeholder="请简要描述您想咨询的问题"></textarea>
                        </div>

                        <div class="form-notice">
                            <p>* 我们承诺对您的所有信息严格保密</p>
                            <p>* 提交后我们将在24小时内与您联系确认</p>
                        </div>

                        <button type="submit" class="submit-btn">提交预约</button>
                    </form>
                </div>
            </div>
        </main>
    </div>
    <script src="appointment.js"></script>
</body>

</html>